<template>
  <div class="carousel-container">
    <!-- 水平轮播图 -->
    <div class="carousel-section">
      <el-carousel height="350px" motion-blur :autoplay="true" interval="3000">
        <el-carousel-item v-for="item in 5" :key="item">
          <div class="color-block" :class="`block-${item}`"></div>
        </el-carousel-item>
      </el-carousel>
    </div>

  </div>
</template>

<style scoped>
.carousel-container {
  padding: 2px;
  max-width: 100%;
  margin: 0 auto;
}

.carousel-section {
  margin-bottom: 40px;
}

.carousel-title {
  color: var(--el-text-color-primary);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: left;
}

.el-carousel {

  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-carousel__item {
  transition: all 0.3s ease;
}

.color-block {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.block-1 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.block-2 {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.block-3 {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.block-4 {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.block-5 {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
</style>